<template>
  <section class="m-istyle">
    <dl>
      <dt>有格调</dt>
      <dd
        v-for="(item,idx) in data"
        :key="idx"
        :kind="item.kind"
        :class="{ active:kind===item.kind }"
        @mouseenter="enter($event)"
      >
        {{ item.title }}
      </dd>
    </dl>
    <!-- element卡片组件 -->
    <ul class="ibody">
      <li
        v-for="(item,idx) in kindSelect"
        :key="idx"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img
            :src="item.img"
            class="image"
          >
          <ul class="cbody">
            <li class="title">{{ item.title }}</li>
            <li class="pos"><span>{{ item.pos }}</span></li>
            <li class="price">￥<em>{{ item.price }}</em><span>/起</span></li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>
<script>
export default {
  data() {
    return {
      kind: 'all',
      data: [
        {
          kind: 'all',
          title: '全部',
          child: [],
          keyword: '景点'
        },
        {
          kind: 'part',
          title: '约会聚餐',
          child: [],
          keyword: '美食'
        },
        {
          kind: 'spa',
          title: '丽人spa',
          child: [],
          keyword: '丽人'
        },
        {
          kind: 'movie',
          title: '电影演出',
          child: [],
          keyword: '电影'
        },
        {
          kind: 'travel',
          title: '品质出游',
          child: [],
          keyword: '旅游'
        }
      ],
      kindSelect: []
    }
  },
  computed: {
    // kindSelect() {
    //   return this.data.filter(item => {
    //     return item.kind === this.kind
    //   })[0].child
    // }
  },
  mounted() {
    this.init()
  },
  methods: {
    async enter(e) {
      let self = this
      //   this.kind = e.target.querySelector('dd').kind[0]
      //   console.log(this.kind)
      this.kind = e.target.getAttribute('kind')
      const {
        status,
        data: { count, pois }
      } = await this.$axios.get('/search/resultsByKeywords', {
        params: {
          city: '西安',
          keyword: this.data.filter(item => item.kind === this.kind)[0].keyword
        }
      })
      if (status === 200 && count > 0) {
        let r = pois
          .filter(item => {
            return item.photos.length
          })
          .map(item => {
            return {
              title: item.name,
              pos: item.type.split(';')[0],
              price: item.biz_ext.cost || '暂无',
              img: item.photos[0].url,
              url: '//abc.com'
            }
          })
        this.kindSelect = r
      }
    },
    async init() {
      const {
        status,
        data: { count, pois }
      } = await this.$axios.get('/search/resultsByKeywords', {
        params: {
          city: '西安',
          keyword: this.data.filter(item => item.kind === this.kind)[0].keyword
        }
      })
      if (status === 200 && count > 0) {
        let r = pois
          .filter(item => {
            return item.photos.length
          })
          .map(item => {
            return {
              title: item.name,
              pos: item.type.split(';')[0],
              price: item.biz_ext.cost || '暂无',
              img: item.photos[0].url,
              url: '//abc.com'
            }
          })
        this.kindSelect = r
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/css/index/artistic.scss';
</style>
